<template>
  <div class="mt20">
    <el-row :xl="24" :lg="24" :xs="24" :gutter="10">
      <el-col :xl="24" :lg="24" :xs="24">
        <el-card class="box-card" :body-style="{ padding: '18px 0px 5px', boxSizing: 'border-box' }">
          <el-row class="title">
            <el-col :lg="2" class="tac module-title">
              <el-button type="primary" plain size="medium" icon="el-icon-plus" @click="edit()">添加</el-button>
            </el-col>
          </el-row>
          <el-table :data="tableData" :height="tableHeight">
            <el-table-column label="序号" type="index" width="400"> </el-table-column>
            <el-table-column prop="name" align="left" width="250" label="工单名称"> </el-table-column>
            <el-table-column prop="id" align="center" label="工单id"> </el-table-column>
            <el-table-column prop="opreation" align="center" label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button type="primary" plain size="medium" @click="edit(scope.row)">编辑</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 编辑弹框 -->
    <el-dialog :title="editFlag ? '编辑工单' : '添加工单'" :visible.sync="dialogFormVisible1" width="800px" inline>
      <el-form :model="form" label-position="right" label-width="160px">
        <el-form-item label="原工单名称：" :label-width="formLabelWidth" v-if="editFlag">
          <el-input v-model="form.original" disabled class="wid-40"></el-input>
        </el-form-item>
        <el-form-item :label="editFlag ? '修改为：' : '新增项目名称：'" :label-width="formLabelWidth">
          <el-select class="wid-40" v-model="form.after" :placeholder="editFlag ? '请选择要更改的项目名称' : '请选择项目名称'">
            <el-option :label="item.label" :value="item.value" v-for="item in devOderItem" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editFlag: false,
      loading: false,
      tableData: [], // 数据
      oderItem: ['平台币转移', '资料修改', '短信验证码超标', '充值订单状态修改', '充值补单', '平台币兑换'], // 正式服列表
      devOderItem: [
        { value: '平台币转移', label: '平台币转移' },
        { value: '资料修改', label: '资料修改' },
        { value: '短信验证码超标', label: '短信验证码超标' },
        { value: '充值补单', label: '充值补单' },
        { value: '充值订单状态修改', label: '充值订单状态修改' },
        { value: '平台币兑换', label: '平台币兑换' },
        { value: '福利中心返利领取', label: '福利中心返利领取' },
      ], // 测试服列表
      dialogFormVisible1: false, // 编辑弹框
      dialogFormVisible2: false, // 添加弹框
      form: {
        id: '',
        after: '', // 修改后的工单名称
        original: '', // 原来的工单名称
      },
      formLabelWidth: '120px',
    };
  },
  created() {
    this.getOderList();
    this.getCurrentScreen();
  },
  methods: {
    // 添加 与 编辑 的 提交
    confirm() {
      if (!this.form.after) {
        this.$message.warning('项目名称不能为空！！！');
        return false;
      }
      this.loading = true;
      if (this.editFlag) {
        // 编辑
        let obj = { name: this.form.after, typeid: this.form.id };
        this.$api.editOder(obj).then(res => {
          if (res.code == '101') {
            this.getOderList();
            this.init();
          }
        });
      } else {
        // 添加
        this.$api.addOder({ name: this.form.after }).then(res => {
          if (res.code == '101') {
            this.getOderList();
            this.init();
          } else {
            this.init();
            this.$message.error(res.msg);
          }
        });
      }
    },
    init() {
      this.dialogFormVisible1 = false;
      this.editFlag = false;
      this.loading = false;
      this.form.after = ''; // 请求完之后清除
    },
    // 编辑
    edit(r) {
      this.editFlag = !!r;
      if (this.editFlag) {
        this.form.original = r.name;
        this.form.id = r.id;
      }
      this.dialogFormVisible1 = true;
    },
    // 获取列表
    getOderList() {
      this.$api.orderType().then(res => {
        if (res.code == '101') {
          this.tableData = res.data;
        }
      });
    },
  },
};
</script>
<style lang='stylus' scoped>
body {
}
</style>
